use crate::colors::{NEW_COLOR, WHITE_COLOR};
use crate::components::{Editor, EditorApi};
use crate::errors::log_error;
use crate::services::save_content;
use crate::utils::dom::{get_win_inner_height, get_win_inner_width};
//use gloo::console::log;
use lazy_static::lazy_static;
use stylist::yew::styled_component;
use web_sys::{HtmlButtonElement, HtmlDivElement};
use yew::{platform::spawn_local, prelude::*};

#[derive(Properties, PartialEq)]
pub struct EditorContainerProps {
    #[prop_or_default]
    pub children: Html,
    #[prop_or_default]
    pub on_close_click: Callback<()>,
}

lazy_static! {
    static ref BUTTON_STYLE: String = format!(
        "color:{};background-color:{};font-size:22px",
        WHITE_COLOR, NEW_COLOR
    );
}

#[styled_component]
pub fn EditorContainer(props: &EditorContainerProps) -> Html {
    let on_close_click = props.on_close_click.clone();

    let container_ref = use_node_ref();
    let add_button_ref = use_node_ref();
    let close_button_ref = use_node_ref();
    {
        let container_ref = container_ref.clone();
        let add_button_ref = add_button_ref.clone();
        use_effect_with((), move |_| {
            let search_box_y = EditorApi::get_search_box_element()
                .get_bounding_client_rect()
                .y();
            let container_div = container_ref
                .cast::<HtmlDivElement>()
                .expect("EditorContainer error div error");
            container_div.style().set_css_text(&format!(
                "height:{}px;top:{}px",
                get_win_inner_height().expect("get_win_inner_height error") - search_box_y - 30.0,
                search_box_y + 25.0
            ));
            let avail_width = get_win_inner_width().expect("get_win_inner_height error");
            let _ = container_div
                .style()
                .set_property("transform", &format!("translate(-{}px, 0px)", avail_width));
            let add_button = add_button_ref
                .cast::<HtmlButtonElement>()
                .expect("add button error div error");
            let _ = add_button
                .style()
                .set_property("transform", &format!("translate({}px, 0px)", avail_width));
        });
    }
    let add_click = {
        Callback::from(move |_| {
            EditorApi::init_note_id();
            EditorApi::init_note_version();
            EditorApi::show_editor_container();
        })
    };
    let close_click = {
        let on_close_click = on_close_click.clone();
        Callback::from(move |_| {
            EditorApi::hide_editor_container();

            let on_close_click = on_close_click.clone();

            {
                let note_id = EditorApi::get_note_id();
                let note_version = EditorApi::get_note_version();
                let note_content = EditorApi::get_note_content();

                spawn_local(async move {
                    log_error(
                        save_content(note_id, note_version, &note_content).await,
                        Some("save_note error".to_string()),
                    );
                    on_close_click.emit(());
                });
            };

            EditorApi::clear_note();
        })
    };
    html! {
        <div id={EditorApi::CONTAINER_ID} ref={container_ref} class={classes!("pos-abs", "w-100", "padding-small", css!(r#"
            background-color: white;
            "#))} >
            <input type="hidden" id={EditorApi::get_note_id_input_id()} />
            <input type="hidden" id={EditorApi::get_note_version_input_id()} value="1" />
            <button id={EditorApi::get_add_button_id()} ref={add_button_ref} style={BUTTON_STYLE.clone()} onclick={add_click} class={classes!("pos-abs", css!(r#"
                border: none;
                border-radius: 12px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
            "#))}>{"+"}</button>
            <button id={EditorApi::get_remove_button_id()} ref={close_button_ref} onclick={close_click} class={classes!("pos-abs", css!(r#"
                border-radius: 12px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                border: none;
                z-index: 2;
                right: -5px;
                top: -10px;
                font-size: 22px;
                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
            "#))}>{"×"}</button>
                        <Editor />
        </div>
    }
}
